<template>
  <Menu ref="wzNav" theme="light" accordion class="_wz_leftNav" :style="{minHeight: '100%',width:'240px'}"
        :active-name="wzNavName"
        :open-names="wzOpenNames" @on-select="openView">
    <template v-for="item in navList">
      <!--  有子集 才执行   -->
      <template v-if="!!item.children">
        <!--  子集就一条  只显示子集 不显示 父级   -->
        <template v-if="item.children.length == 1">
          <!--  hideInBread：true 不会显示上级菜单标题 -->
          <template v-if="item.meta.hideInBread">
            <MenuItem :name="item.children[0].name" :key="item.children[0].name" :to="item.children[0].name">
              <i :class="item.children[0].meta.icon"></i>
              <!--<Icon :type="item.children[0].meta.icon"/>-->
              {{item.children[0].meta.title}}
            </MenuItem>
          </template>
          <!--  hideInBread：true 不会显示上级菜单标题 -->
          <template v-else>
            <Submenu :name="item.name" :key="item.name">
              <template slot="title">
                <!--<Icon :type="item.meta.icon"/>-->
                <i :class="item.meta.icon"></i>
                {{item.meta.title}}
              </template>
              <MenuItem :name="titem.name" :key="titem.name" v-for="titem in item.children" :to="titem.name">
                <!--<Icon :type="titem.icon"/>-->
                <i :class="titem.icon"></i>
                {{titem.meta.title}}
              </MenuItem>
            </Submenu>
          </template>
        </template>
        <!--  子集 > 1 循环渲染   -->
        <template v-else-if="item.children.length > 0">
          <Submenu :name="item.name" :key="item.name">
            <template slot="title">
              <!--<Icon :type="item.meta.icon"/>-->
              <i :class="item.meta.icon"></i>
              {{item.meta.title}}
            </template>
            <!--循环子级 -->
            <template v-for="titem in item.children">
              <!-- 如果子级还有子级 -->
              <template v-if="!!titem.children">
                <!-- 如果子级还有子级 -->
                <template v-if="titem.children.length > 0">
                  <Submenu :name="titem.name" :key="titem.name">
                    <template slot="title">
                      <!--<Icon :type="item.meta.icon"/>-->
                      <i :class="titem.meta.icon"></i>
                      {{titem.meta.title}}
                    </template>
                    <MenuItem :name="witem.name" :key="witem.name" v-for="witem in titem.children" :to="witem.name">
                      <i :class="witem.icon"></i>
                      {{witem.meta.title}}
                    </MenuItem>
                  </Submenu>
                </template>
                <!-- 没有子集 直接渲染 -->
                <template v-else>
                  <MenuItem :name="titem.name" :to="titem.name" :key="titem.name">
                    <i :class="titem.icon"></i>
                    {{titem.meta.title}}
                  </MenuItem>
                </template>
              </template>
              <!-- 没有子集 直接渲染 -->
              <template v-else>
                <MenuItem :name="titem.name" :to="titem.name" :key="titem.name">
                  <i :class="titem.icon"></i>
                  {{titem.meta.title}}
                </MenuItem>
              </template>
            </template>


          </Submenu>
        </template>
      </template>
    </template>
  </Menu>
</template>
<script>
  //  import tabsList from "./tabs.vue";
  import routers from '@/router/routers'

  export default {
    props: ["navSelect"],
    data() {
      return {
        wzNavName: "",
        wzOpenNames: ["_form"],
        navList: [],
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
      var that = this;
      var list = routers;
      var access = JSON.parse(sessionStorage.getItem('loginData')).authority.SAFETY;
      that.navList = that.public.getMenuByRouter(list, access);
      that.wzNavName = that.$route.matched.map(item => item.name).filter(item => item !== name)[1];//that.navList[0].id;//菜单默认 选中
      that.wzOpenNames = [that.$route.matched.map(item => item.name).filter(item => item !== name)[0]];//that.navList[0].id;//父级默认展开


      //第一个菜单
      var index = that.getMenuItem(that.navList[0].children[0].name);
      index = {"label": index.meta.title, "data": index.name}
      that.$emit("topNavList", index)//菜单点击数据传输 首页

      //当前页面地址的菜单
      var mi = that.getMenuItem(that.wzNavName);
      if (mi.data != index.data) {
        mi = {"label": mi.meta.title, "data": mi.name}
        that.$emit("topNavList", mi)//菜单点击数据传输 现在地址上页面
      }


      that.$nextTick(() => {//执行菜单刷新
        that.$refs.wzNav.updateOpened();
        that.$refs.wzNav.updateActiveName();
      })
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态

    },
    methods: {//执行的方法
      openView(name) {
        var that = this;
        var mi = that.getMenuItem(name);
        mi = {"label": mi.meta.title, "data": mi.name}
        //////////mi.show = true;
        that.$emit("topNavList", mi)//菜单点击数据传输main.vue

//      that.$router.push({
//        name
//      })
      },
      getMenuItem: function (name) {//获取菜单数据
        var that = this;
        var navList = that.navList;
        for (var i = 0; i < navList.length; i++) {
          for (var io = 0; io < navList[i].children.length; io++) {
            if (navList[i].children[io].name == name) {
              return navList[i].children[io];
            }
          }
        }
        return {};//这个应该不可能发生
      },
      menuExpansion: function (data) {//菜单展开
        var that = this;
        var navList = that.navList;
        for (var i = 0; i < navList.length; i++) {
          for (var io = 0; io < navList[i].children.length; io++) {
            if (navList[i].children[io].name == data) {
              return [navList[i].name];
            }
          }
        }
        return [];//这个应该不可能发生
      }
    },
    watch: {//监听
      navSelect: function (val, oldVal) {
        var that = this;
        //菜单展开
        that.wzOpenNames = that.menuExpansion(val)
        that.wzNavName = val;//菜单选中
        that.$nextTick(() => {//执行菜单刷新
          that.$refs.wzNav.updateOpened();
          that.$refs.wzNav.updateActiveName();
        })
      }
    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  //拂晓蓝（默认）
  ._wz_1890ff._wz_leftNav {
    .ivu-menu-light {
      background: #1890ff !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #1890ff !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #1890ff !important;
    }
  }

  //薄暮
  ._wz_f5222d._wz_leftNav {
    .ivu-menu-light {
      background: #f5222d !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #f5222d !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #f5222d !important;
    }
  }

  //火山
  ._wz_fa541c._wz_leftNav {
    .ivu-menu-light {
      background: #fa541c !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #fa541c !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #fa541c !important;
    }
  }

  //日暮
  ._wz_faad14._wz_leftNav {
    .ivu-menu-light {
      background: #faad14 !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #faad14 !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #faad14 !important;
    }
  }

  //明青
  ._wz_13c2c2._wz_leftNav {
    .ivu-menu-light {
      background: #13c2c2 !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #13c2c2 !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #13c2c2 !important;
    }
  }

  //极光绿
  ._wz_52c41a._wz_leftNav {
    .ivu-menu-light {
      background: #52c41a !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #52c41a !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #52c41a !important;
    }
  }

  //极客蓝
  ._wz_2f54eb._wz_leftNav {
    .ivu-menu-light {
      background: #2f54eb !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #2f54eb !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #2f54eb !important;
    }
  }

  //酱紫
  ._wz_722ed1._wz_leftNav {
    .ivu-menu-light {
      background: #722ed1 !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #722ed1 !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #722ed1 !important;
    }
  }

  //伯爵黑
  ._wz_1d1e23._wz_leftNav {
    .ivu-menu-light {
      background: #1d1e23 !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #1d1e23 !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #1d1e23 !important;
    }
  }

  //菜单不加颜色的时候
  ._wz_1890ff_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #edf6ff;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #1890ff;
    }
  }

  ._wz_f5222d_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #ffeff0;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #f5222d;
    }
  }

  ._wz_fa541c_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #f6e1da;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #fa541c;
    }
  }

  ._wz_faad14_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #fff7e8;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #faad14;
    }
  }

  ._wz_13c2c2_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #e3f6f6;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #13c2c2;
    }
  }

  ._wz_52c41a_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #ecfae6;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #52c41a;
    }
  }

  ._wz_2f54eb_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #ebeefc;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #2f54eb;
    }
  }

  ._wz_722ed1_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #f5eeff;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #722ed1;
    }
  }

  //伯爵黑
  ._wz_1d1e23_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #e6e6e6;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #1d1e23;
    }
  }
</style>

